<template>
	<view>
		<nav-header title="个性签名" :showRight="false"></nav-header>
		<view class="nickname">
			<view class="form">
				<view class="title">
					<text class="text-sm-Medium">我的个性签名</text>
					<text class="text-sm-Regular" style="color: #A4A7AE;" v-if="fontNum!=0">{{fontNum}}/50</text>
					<text class="text-sm-Regular" style="color: #A4A7AE;" v-else>{{countSignature}}/50</text>
				</view>
				<uni-forms :modelValue="formData" :rules="rules">
					<uni-forms-item name="signature">
						<uni-easyinput type="textarea" @input="sumFontNum" maxlength="50" v-model="formData.signature"
							placeholder="请输入内容" :clearable="false" :inputBorder="false" />
					</uni-forms-item>
				</uni-forms>
				<view class="tip">
					<text class="text-xs-Regular">*在朋友圈、商友圈、个人信息地方显示，展示个人的魅力。</text>
				</view>
			</view>
			<view class="commit">
				<view class="button-style">
					<button class="btncolor" @click="submitForm()">
						<text class="text-md-Medium" style="color: #fff;">保存</text>
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
				},
				rules: {
					signature: [{
						required: true,
						errorMessage: '请输入个性签名',
					}]
				},
				fontNum: 0,
				countSignature:0
			}
		},
		methods: {
			submitForm() {
				if(!this.formData.signature){
					uni.showToast({
						title:"个性签名不能为空",
						icon: 'none'
					});
					return;
				}
				this.$http({
					url:"/user/update",
					method:"PUT",
					data:this.formData
				}).then(()=>{
					this.userStore.setUserInfo(this.formData)
					uni.showToast({
						title:"保存成功",
						icon: 'none'
					});
					setTimeout(()=>{
						uni.navigateBack();
					},1000);
				})
			},
			sumFontNum(e) {
				this.fontNum = e.length
			}
		},
		onLoad() {
			let mine=this.userStore.userInfo
			this.formData=JSON.parse(JSON.stringify(mine))
			this.countSignature=this.formData.signature.length
		}
	}
</script>

<style lang="scss" scoped>
	.nickname {
		width: 100%;

		.form {
			display: flex;
			flex-direction: column;
			padding: 24rpx 32rpx;
			gap: 24rpx;
			
			:deep(.uni-forms){
				height: 232rpx;
			}
			
			:deep(.uni-easyinput__content.is-textarea) {
				// height: 40rpx;
				padding: 24rpx 32rpx;
				background-color: $gray-100 !important;
			}
			
			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.tip {
				display: flex;
				align-items: center;
				justify-content: space-between;
				// font-size: 25rpx;
				color: $gray-400;
			}
		}



		.commit {
			width: 100%;
			position: fixed;
			bottom: 42rpx;
			left: 0;
			display: flex;
			justify-content: center;
			align-items: center;
		
			.button-style {
				padding: 24rpx 32rpx;
				width: 100%;
			}
		
			.btncolor {
				width: 100%;
				background-color: $brand-500;
				color: $white;
				border-radius: 34rpx;
				padding: 8rpx 24rpx;
				line-height: 60rpx;
				text-align: center;
			}
		}
	}
</style>